<template>
  <el-upload
    class="upload-demo"
    :action="actionUrl"
    :limit="limit"
    :headers="tokenVal"
    :on-exceed="limitFun"
    :on-progress="progressFun"
    :on-success="successFun"
    :on-error="errorFun"
    :on-remove="handleRemove"
  >
    <el-button size="small" type="primary">上传音频</el-button>
    <div>

    </div>
  </el-upload>
</template>
    
  <script>
export default {
  name: "uploadVideo",
  props: {
    limit: {
      type: Number,
      default: 5,
    },
    actionUrl: {
      type: String,
      default: "http://110.41.19.205:8080/api/file/upload",
    },
    picnum: {
      type: Number,
      default: 0,
    },
    limitFun: {
      type: Function,
      default: function (arg) {
        this.$message({
          message: `上传文件超出限制数量${arg.length}`,
          type: "warning",
        });
      },
    },
  },
  data() {
    return {
      tokenVal: { satoken: window.localStorage.getItem("loginKey") }, //请求拦截器目前没有生效，先这样写达到联调目的
    };
  },
  methods: {
    handleRemove(file, fileList) {
      this.$emit("remove", file, fileList);
    },
    successFun(response, file, fileList) {
      if (response.success) {
        this.$emit("success", file, fileList);
      } else {
        fileList.pop();
        this.$message({
          message: `上传文件失败，${response.message}`,
          type: "error",
        });
      }
    },
    errorFun(err, file, fileList) {
      this.$message({
        message: `上传文件失败`,
        type: "error",
      });
    },
  },
};
</script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
    